<template>
    <div class="information" :class="[{'game-info':goodstp.toString()=='1'}]">
        <div class="top-section">
            <p class="title">{{title}}</p>
            <p class="time">{{publishTime}}</p>
        </div>
        <!-- 内容区域 -->
        <div class="content-container">
            <div class="meal-content" v-html="htmlmsg">
            </div>
        </div>
        <!-- 底部按钮 -->
        <div v-show="goodstp.toString()=='1'" class="bottom-btn-container">
          <mt-button size="large" class="bottom-btn" type="default" @click.native="experienceHandle">立即体验</mt-button>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
import Vue from "vue";
import { mapState } from "vuex";
import { formatDate } from "../../common/js/date.js";
import { Button } from "mint-ui";
import "mint-ui/lib/button/style.css";

Vue.component(Button.name, Button);

export default {
  name: "v-information",
  data() {
    return {
      infoid: "",
      title: "",
      publishTime: "",
      info: "",
      htmlmsg: "",
      goodstp: "",
      gameinfo: null
    };
  },
  components: {},
  computed: {
    ...mapState(["path", "role", "userid", "soursePath", "storeid"])
  },
  created() {
    this.infoid = this.$route.params.infoid;
    this.getDetailsData();
  },
  methods: {
    getDetailsData() {
      this.$http
        .post(this.path + "store/Goods/informactionmsg", {
          goodsid: this.infoid
        })
        .then(response => {
          let serverData = response.body.result;
          let ginfo = serverData.ginfo;
          this.title = ginfo.gname;
          this.info = ginfo.message;
          this.publishTime = formatDate(
            new Date(parseInt(ginfo.addtime) * 1000),
            "yyyy-MM-dd hh:mm"
          );
          this.htmlmsg = this.unescapeHTML(ginfo.htmlmsg);
          this.goodstp = ginfo.goodstp;
          if (this.goodstp.toString() == "1") {
            this.gameinfo = serverData.gameinfo;
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    unescapeHTML: function(a) {
      a = "" + a;
      return a
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;/g, "&")
        .replace(/&quot;/g, '"')
        .replace(/&apos;/g, "'");
    },
    experienceHandle() {
      let link =
        this.gameinfo.gameurl +
        `?gameid=${this.gameinfo.gameid}&storeid=${this.storeid}&userid=${
          this.userid
        }`;
      window.location.href = link;
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/css/mixin.styl';

.information {
  font-family: 'Microsoft YaHei';
  width: 100%;
  background-color: #fff;

  &.game-info {
    padding-bottom: 0.2rem;
  }

  .top-section {
    min-height: 0.4rem;
    margin: 0 0.09rem;
    padding: 0.2rem 0 0.14rem 0;
    border-bottom-1px(#f0f0f0);
    text-align: center;

    .title {
      display: inline-block;
      color: #000;
      font-size: 0.14rem;
      line-height: 0.18rem;
      max-width: 2.4rem;
    }

    .time {
      margin-top: 0.05rem;
      color: #aaa;
      font-size: 0.12rem;
    }
  }

  .content-container {
    .meal-content {
      padding: 0.2rem 0.1rem;
      box-sizing: border-box;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .bottom-btn-container {
    position: fixed;
    box-sizing: border-box;
    max-width: 750px;
    width: 100%;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50, 0, 0);
    left: 50%;
    height: 0.38rem;
    padding: 0 0.06rem;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 0 1px rgba(230, 230, 230, 1);

    .bottom-btn {
      width: 100%;
      font-size: 0.13rem;
      letter-spacing: 0.02rem;
      height: 0.3rem;
      box-shadow: none;
      border-radius: 0.03rem;
      background-color: #f394ba;
      color: #fff;
    }
  }
}
</style>